﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>

    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();
           //构建一组离散化的点
        var Coordinates = new Array();
        for (var i = 0; i < 1; i += 0.01) {
            Coordinates.push([(-0) + i, 0 - i]);
        }
        for (var j = 0; j < 1; j += 0.01) {
            Coordinates.push([(-0) + 1 + j, 0 - 1]);
        }
        for (var k = 0; k < 1; k += 0.01) {
            Coordinates.push([(-0) + 2 + k, 0 - 1 - k]);
        }
        for (var h = 0; h < 1; h += 0.01) {
            Coordinates.push([(-0) + 3 + h, 0 - 2]);

        }
        //将离散点构建成一条折线
        var route = new ol.geom.LineString(Coordinates);
        //获取直线的坐标
        var routeCoords = route.getCoordinates();
        var routeLength = routeCoords.length;

        var routeFeature = new ol.Feature({
            type: 'route',
            geometry: route
        });
        var geoMarker = new ol.Feature({
            type: 'geoMarker',
            geometry: new ol.geom.Point(routeCoords[0])
        });
        var startMarker = new ol.Feature({
            type: 'icon',
            geometry: new ol.geom.Point(routeCoords[0])
        });
        var endMarker = new ol.Feature({
            type: 'icon',
            geometry: new ol.geom.Point(routeCoords[routeLength - 1])
        });

        var styles = {
            'route': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    width: 6,
                    color: [237, 212, 0, 0.8]
                })
            }),
            'icon': new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 1],
                    src: "../../images/stationicon.png"
                })
            }),
            'geoMarker': new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 7,
                    snapToPixel: false,
                    fill: new ol.style.Fill({ color: 'black' }),
                    stroke: new ol.style.Stroke({
                        color: 'white',
                        width: 2
                    })
                })
            })
        };

        var animating = false;
        var speed, now;
        var speedInput = document.getElementById('speed');
        var startButton = document.getElementById('start-animation');

        var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [routeFeature, geoMarker, startMarker, endMarker]
            }),
            style: function (feature) {
                //如果动画是激活的就隐藏geoMarker
                if (animating && feature.get('type') === 'geoMarker') {
                    return null;
                }
                return styles[feature.get('type')];
            }
        });
map.addLayer(vectorLayer);
        var center = [0, 0];
		
		var moveFeature = function (event) {
            var vectorContext = event.vectorContext;
            var frameState = event.frameState;

            if (animating) {
                var elapsedTime = frameState.time - now;
                //通过增加速度，来获得lineString坐标
                var index = Math.round(speed * elapsedTime / 1000);

                if (index >= routeLength) {
                    stopAnimation(true);
                    return;
                }

                var currentPoint = new ol.geom.Point(routeCoords[index]);
                var feature = new ol.Feature(currentPoint);
                vectorContext.drawFeature(feature, styles.geoMarker);
            }
            //继续动画效果
            map.render();
        };

        function startAnimation() {
            if (animating) {
                stopAnimation(false);
            } else {
                animating = true;
                now = new Date().getTime();
                speed = speedInput.value;
                startButton.textContent = '结束运动';
                //隐藏geoMarker
                geoMarker.setStyle(null);
                //设置显示范围
                map.getView().setCenter(center);
                map.on('postcompose', moveFeature);
                map.render();
            }
        }


        /**
        * @param {boolean}结束动画
        */
        function stopAnimation(ended) {
            animating = false;
            startButton.textContent = '开始运动';

            //如果动画取消就开始动画
            var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
            /** @type {ol.geom.Point} */
            (geoMarker.getGeometry()).setCoordinates(coord);
            //移除监听
            map.un('postcompose', moveFeature);
        }

        startButton.addEventListener('click', startAnimation, false);
        }
    </script>
</head>
<body>
    <div id="menu">
        <label for="speed" style="font-weight: bold;">
            运动速度:&nbsp;
            <input id="speed" type="range" min="10" max="999" step="10" value="60" />
        </label>
        <button id="start-animation" class="ButtonLib">
            开始运动
        </button>
    </div>
    <div id="map">
    </div>
</body>
</html>
